<template>
    <view class="serach">
      <view class="top-left">
        <view class="top-logo-left">
          <x-image src="/assets/images/home-top-logo-left.png"/>
        </view>
        <view class="top-logo">
          <x-image src="/assets/images/home-top-logo.gif"/>
        </view>
        <view class="top-logo-right">
          <x-image src="/assets/images/home-top-logo-left.png"/>
        </view>
      </view>
      <view @click="onSearch" class="_search">
        <x-icon name="icon-012" size="32" color="#999999"/>
        <text class="_text">输入搜索关键词</text>
      </view>
      <view @click="onSort" style="text-align:center;padding-top: 1px;">
        <x-icon name="icon-038" :color="'#323233'" size="32" ></x-icon>
        <text class="classify">分类</text>
      </view>
    </view>
</template>

<script>
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
export default {
  name: 'HSearch',
  components: {
    XIcon,
    XImage
  },
  props: {
  },
  data() {
    return {

    };
  },
  computed: {},
  watch: {},
  onLoad() {

  },
  onHide() {

  },
  methods: {
    //  搜索页跳转
    onSearch() {
      uni.navigateTo({
        url: '/packages/search/search/index'
      });
    },
    //  分类页跳转
    onSort() {
      uni.navigateTo({
        url: '/packages/sort/index'
      });
    }
  }
};
</script>

<style lang="scss">
.serach{
  display: flex;
  align-items: center;
  padding: 24px;
  //background: #FF3317;
  .top-left{
    display: flex;
    align-items: center;
    .top-logo-left{
      width: 14px;
      height: 38px;
    }
    .top-logo{
      width: 240px;
      height: 58px;
    }
    .top-logo-right{
      width: 14px;
      height: 38px;
      transform: rotate(180deg);
    }
  }
  ._search{
    flex: 1;
    background: #F7F8FA;
    border-radius: 6px;
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin: 0 24px;
    ._text{
      font-size: 28px;
      color: #999999;
      margin-left: 8px;
      margin-top: -2px;
    }
  }
  .classify{
    font-size: 22px;
    color: #323233;
    display: block;
  }
}
</style>
